<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
    <style>
        body {
            background-image: url("img/welcome.jpg");
            background-repeat: repeat;
        }

        ul {
            margin: 0;
            padding:0;
            list-style: none;
        }

        #main {
            margin:2px auto;
            text-align: center;
        }
        .page {
            border: 0px solid lightseagreen;
            height: 32px;
            width:900px;
            margin:10px auto;
            background-color: #FFD026;
        }
        .page ul.mainUL {
            margin:0 auto;
            height: 28px;
            border:0px solid green;
            padding: 1px 0px 1px 10px;
        }

        .page ul.mainUL li {
            float: left;
            border: 0px solid black;
            height: 26px;
            margin-right: 3px;
        }

        .page ul.mainUL li.pageControlLi
        {
            width: 60px;
            height: 20px;
            background-color: antiquewhite;
            padding:5px 5px;
            border: 1px solid black;
        }

        .page ul.mainUL li.pageControlLi a {
            text-decoration: none;
            color:#000;
        }

        .page ul.mainUL li.pageSizeLi {
            width: 140px;
            border: 0px solid #A6A6A6;
            height: 20px;
            margin-right: 3px;
            padding:4px 5px;
        }

        .page ul.mainUL li.pageSizeLi input {
            height: 18px;
            width: 45px;
            text-align: center;
        }

        .page ul.mainUL li.pageTotalLi{
            width: 180px;
            border: 0px solid #A6A6A6;
            height: 20px;
            margin-right: 3px;
            padding:4px 5px;
        }

        .page ul.pageNoUL {
            height: 26px;
            width:auto;
            border:0px solid blue;
            padding-left:3px;
        }
        .page ul.pageNoUL li.pageNoLi {
            border: 1px solid black;
            height: 20px;
            width: 20px;
            margin-right: 3px;
            padding:5px 5px;
            background-color: antiquewhite;
        }

        .page ul.pageNoUL li.pageNoCurrentLi {
            float: left;
            border: 1px solid black;
            height: 20px;
            width: 20px;
            margin-right: 3px;
            padding:5px 5px;
            background-color: orange;
        }

        .page ul.pageNoUL li a {
            text-decoration: none;
            color:#000;
        }

    </style>
    <script src="js/jquery/jquery-1.11.0.min.js"></script>
    <script src="js/user/userList.js"></script>
</head>
<body>
    <div id="header"></div>
    <div id="main">
        <h1>恭喜，登录成功！</h1>
        <div class="searchArea">
            用户名：<input type="text" name="username" id="username" placeholder="请输入用户名">
            <input type="button" value="查询" onclick="go(1)">&nbsp;&nbsp;
            <input type="button" value="批量删除" onclick="batchDelUser()">
        </div>
        <h2>用户列表信息如下：</h2>
        <table style="width:900px;border-collapse: collapse;" border="1px" align="center">
            <tr>
                <th>全选 <input type="checkbox" id="chkAll"> </th>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>手机号</th>
                <th>注册时间</th>
                <th>操作</th>
            </tr>
        </table>
        <div class="page">
            <ul class="mainUL">
                <li class="pageTotalLi">
                    共<span class="totalRecords">100</span>条记录，共<span class="totalPageNum">20</span>页
                </li>
                <li  class="pageSizeLi">
                    每页显示 <input type="number" name="pageSize" id="pageSize" value="5" onblur="go(1)">条
                </li>
                <li class="pageControlLi">
                    <a href="javascript:go(1)">首页</a>
                </li>
                <li class="pageControlLi">
                    <a href="javascript:go(1)">上一页</a>
                </li>
                <li>
                    <ul class="pageNoUL">
                    </ul>
                </li>
                <li class="pageControlLi">
                    <a href="javascript:go(1)">下一页</a>
                </li>
                <li class="pageControlLi">
                    <a href="javascript:go(1)">末页</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="delResult"></div>
</body>
</html>